<template>
	<view class="page">
		<view class="top">
			<view class="state">
				{{orderDetail.orderStatus == 1 ? '未支付' :  orderDetail.orderStatus == 2 ? '待接单' : orderDetail.orderStatus == 3 ? '进行中' : orderDetail.orderStatus == 4 ? '已完成' : orderDetail.orderStatus == 5 ? '确认完成' : orderDetail.orderStatus == 6 ? '已取消' : ''}}
			</view>
			<view class="state_name">
				{{orderDetail.orderStatus == 1 ? '支付后可被接单' :  orderDetail.orderStatus == 2 ? '订单待接单，快开始接单吧' : orderDetail.orderStatus == 3 ? '请您完成任务' : (orderDetail.orderStatus == 4 && orderDetail.identity == 1) ? '请确认订单' :  (orderDetail.orderStatus == 4 && orderDetail.identity == 2) ? '订单已完成，看看其他任务吧' : orderDetail.orderStatus == 5 ? '订单已完成' : orderDetail.orderStatus == 6 ? '订单已取消，看看其他任务吧' : ''}}
			</view>
		</view>
		<view class="details">
			<view class="title">订单详情</view>
			<view class="line"></view>
			<view class="dis aic mar10">
				<view class="lable">
					待帮助人：
				</view>
				<view class="dis aic box">
					<view class="aravat_box">
						<image :src="orderDetail.avatar" mode="widthFix" style="width: 44rpx;" />
					</view>
					<view class="value">{{orderDetail.nickName}}</view>
				</view>
			</view>
			<view class="dis aic mar10">
				<view class="lable">
					订单编号：
				</view>
				<view class="dis aic box">
					<view class="value">{{orderDetail.orderNo}}</view>
					<view class="copy" @click="copyText(orderDetail.orderNo)">复制</view>
				</view>
			</view>
			<view class="dis aic mar10">
				<view class="lable">
					下单时间：
				</view>
				<view class="dis aic box">
					<view class="value">{{orderDetail.createTime}}</view>
				</view>
			</view>
			<view class="dis aic mar10">
				<view class="lable">
					订单详情：
				</view>
				<view class="dis aic box">
					<view class="value red">{{orderDetail.orderContent}}</view>
				</view>
			</view>

		</view>
		<view class="details">
			<view class="title">仅接单人可见信息</view>
			<view class="line"></view>
			<view class="" v-if="orderDetail.orderStatus == 3 || orderDetail.identity == 1">
				<view class="dis aic mar10">
					<view class="lable">
						联系电话：
					</view>
					<view class="dis aic box">
						<view class="value">{{orderDetail.receiving.phone}}</view>
					</view>
				</view>
				<view class="dis aic mar10">
					<view class="lable">
						备注：
					</view>
					<view class="dis aic box">
						<view class="value">{{orderDetail.receiving.remark}}</view>
					</view>
				</view>
				<view class="dis aic mar10">
					<view class="lable">
						订单详情：
					</view>
					<view class="dis aic box">
						<image :src="orderDetail.receiving.images" mode="widthFix" style="width: 300rpx;" />
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="dis aic mar10">
					<view class="lable">
						接单后可见
					</view>
				</view>
			</view>

		</view>
		<view class="details" v-if="orderDetail.orderStatus == 3 && orderDetail.identity == 1">
			<view class="title">接单人信息</view>
			<view class="line"></view>
			<view class="">
				<view class="dis aic mar10">
					<view class="aravat_box">
						<image :src="orderDetail.help.avatar" mode="widthFix" style="width: 44rpx;"></image>
					</view>
					<view class="dis aic box marleft20">
						<view class="value">{{orderDetail.help.nickName}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom dis jcsb aic">
			<view>
				<text class="left">佣金</text><text class="price">￥{{orderDetail.amount}}</text>
			</view>

			<view class="btns dis aic ">
				<!-- 骑手取消 -->
				<view class="red btn" v-if="(orderDetail.orderStatus == 3  && orderDetail.identity == 2) "
					@click="helpOrderCancel">
					取消订单</view>
				<!-- 发起人取消 -->
				<view class="red btn"
					v-if="(orderDetail.orderStatus == 1 || orderDetail.orderStatus == 2) && orderDetail.identity == 1  "
					@click="myCancel">
					取消订单</view>
				<!-- 1未支付2待接单3进行中4已完成5确认完成6已取消 -->
				<view class="green btn" v-if="orderDetail.orderStatus == 1" @click="pay">立即支付</view>
				<view class="green btn" v-if="orderDetail.orderStatus == 2 && orderDetail.identity == 3"
					@click="changeShowPhone">立即接单</view>
				<!-- 跑腿 -->
				<view class="warn btn" v-if="(orderDetail.orderStatus == 3 &&  orderDetail.identity == 2)"
					@click="helpOrderCom">
					确认订单
				</view>
				<!-- 发布人 -->
				<view class="warn btn" v-if=" orderDetail.orderStatus == 4 && orderDetail.identity == 1"
					@click="helpOrderConfirmCom">
					确认订单
				</view>
			</view>
		</view>
		<u-popup :show="showPhone" @close="close" @open="open">
			<view class="popup">
				<view class="btns dis aic jcsb">
					<view class="btn" @click="closePhone">
						取消
					</view>
					<view class="btn" @click="helpOrder">
						确认
					</view>
				</view>
				<view class="card dis aic">
					<view class="tips">
						手机号<text style="color: red;">*</text>
					</view>
					<u--input placeholder="请输入" v-model="receivingPhone" type='number' class="inpu bg"></u--input>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		helpOrderInfo,
		helpOrderCancelOrder,
		helpOrderPay,
		helpOrderReceive,
		helpOrderCancelReceive,
		helpOrderComplete,
		helpOrderConfirmComplete,
		paySuccess
	} from '@/api.js'
	export default {
		data() {
			return {
				orderDetail: {},
				showPhone: false,
				receivingPhone: ''
			}
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
			}
			this.init()
		},
		methods: {
			closePhone() {
				this.receivingPhone = ''
				this.showPhone = false
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			init() {
				this.getDetail()
			},
			// 跑腿确认订单
			async helpOrderCom() {
				let res = await helpOrderComplete({
					orderNo: this.orderDetail.orderNo
				})
				if (res.code == 200) {
					uni.showToast({
						title: '确认成功',
						icon: 'none'
					});
					this.getDetail()
				}
			},
			async paySuccess() {
				let res = await paySuccess({
					orderNo: this.orderDetail.orderNo
				})
				if (res.code == 200) {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					this.getDetail()
				}
			},

			// 发布人确认订单
			async helpOrderConfirmCom() {
				let res = await helpOrderConfirmComplete({
					orderNo: this.orderDetail.orderNo
				})
				if (res.code == 200) {
					uni.showToast({
						title: '确认成功',
						icon: 'none'
					});
					this.getDetail()
				}
			},


			changeShowPhone() {
				this.showPhone = true
			},
			// 抢单
			async helpOrder() {
				if (this.receivingPhone == '' || !this.receivingPhone) {
					uni.showToast({
						title: '请输入您的手机号',
						icon: 'none'
					});
					return
				}
				this.showPhone = false
				let res = await helpOrderReceive({
					orderNo: this.orderDetail.orderNo,
					receivingPhone: this.receivingPhone
				})
				if (res.code == 200) {
					uni.showToast({
						title: '抢单成功',
						icon: 'none'
					});
					this.getDetail()
				}
			},

			// 跑腿取消订单
			async helpOrderCancel() {
				let res = await helpOrderCancelReceive({
					orderNo: this.orderDetail.orderNo
				})
				if (res.code == 200) {
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			},
			async getDetail() {
				let res = await helpOrderInfo({
					id: this.id
				})
				this.orderDetail = res.result
			},
			async pay() {
				let that = this
				console.log('支付');
				let res = await helpOrderPay({
					orderNo: this.orderDetail.orderNo
				})
				if (res.code == 200) {
					let temp = res.result
					console.log('WeixinJSBridge ', WeixinJSBridge);
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
							"appId": temp.appId, //公众号ID，由商户传入     
							"timeStamp": temp.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": temp.nonceStr, //随机串     
							"package": temp.package,
							"signType": temp.signType, //微信签名方式：     
							"paySign": temp.paySign //微信签名 
						},
						function(ress) {
							if (ress.err_msg === 'requestMerchantTransfer:ok') {
								// 支付成功
								// that.paySuccess()
							}
						})
				}
			},
			async myCancel() {
				// 本人取消订单
				let res = await helpOrderCancelOrder({
					orderNo: this.orderDetail.orderNo
				})
				if (res.code == 200) {
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		.btns {
			padding: 40rpx 20rpx;
			box-sizing: border-box;
		}
	}

	.card {
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		width: 690rpx;
		margin: 14rpx 30rpx 0;
		padding: 34rpx 38rpx 160rpx;
		box-sizing: border-box;

		.title {
			font-family: Inter, Inter;
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
		}

		.inpu {

			padding-left: 18rpx !important;
			margin: 10rpx 0;

		}

		.bg {
			background: #F5F5F5;
		}

		.tips {
			font-family: Inter, Inter;
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
		}


	}

	.page {
		width: 750rpx;
		min-height: 100vh;
		background: #F6F6F6;
		padding-bottom: 200rpx;
		box-sizing: border-box;
	}

	.top {
		width: 750rpx;
		height: 160rpx;
		background: #50E897;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding-top: 46rpx;
		box-sizing: border-box;

		.state {
			width: 100%;
			text-align: center;
			ont-family: Noto Sans SC, Noto Sans SC;
			font-weight: bold;
			font-size: 39rpx;
			color: #FFFFFF;
			line-height: 39rpx;
			margin: 0 0 10rpx 0;
		}

		.state_name {
			font-family: Noto Sans SC, Noto Sans SC;
			text-align: center;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
			line-height: 45rpx;
			width: 100%;
		}
	}

	.details {
		width: 690rpx;
		margin: 30rpx auto;
		background: #FFFFFF;
		border-radius: 21rpx 21rpx 21rpx 21rpx;
		padding: 28rpx 30rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #4F4F62;
			line-height: 41rpx;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background: #C1C1C1;
		}

		.lable {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #888888;
			width: 200rpx;
		}

		.box {
			flex: 1;
		}

		.aravat_box {
			width: 44rpx;
			height: 44rpx;
			overflow: hidden;
			border-radius: 50% 50%;
		}

		.value {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}

		.red {
			color: #E93232;
		}

		.copy {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 27rpx;
			color: rgba(0, 199, 119, 0.6);
		}
	}

	.mar10 {
		margin: 10rpx 0;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 750rpx;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.left {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}

		.price {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 48rpx;
			color: #ED0000;
		}

		.btns {
			.btn {
				margin: 0 10rpx;
				width: 180rpx;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 11rpx 11rpx 11rpx 11rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.green {
				background: #50E897;
			}

			.red {
				background: #ED0000;
			}

			.warn {
				background: #F6D44D;
			}
		}
	}

	.marleft20 {
		margin-left: 20rpx;
	}
</style>